<template>
  <view>
    <view class="content">
      <view class="title t-ju-between">
        <view class="">
          客户信息
        </view>
        <view class="">
          P011
        </view>
      </view>
      <view class="t-ju-between list">
        <view class="left_list">称呼</view>
        <view class="right_list">陈先生</view>
      </view>
      <view class="t-ju-between list">
        <view class="left_list">联系电话</view>
        <view class="right_list">13000000000</view>
      </view>
      <view class="title">设计师</view>
      <view class="t-ju-between list">
        <view class="left_list">设计师</view>
        <view class="right_list" @click="handleSelect">专业设计师老王</view>
      </view>
      <view class="title">优惠折扣</view>
      <view class="t-ju-between list">
        <view class="left_list">优惠卷</view>
        <view class="right_list">抖音团购满500减100券</view>
      </view>
      <view class="title">场景信息</view>
      <view class="t-ju-between list">
        <view class="left_list">设计场景</view>
        <view class="right_list">住宅</view>
      </view>
      <view class="t-ju-between list">
        <view class="left_list">需要绿植数量</view>
        <view class="right_list">请选择</view>
      </view>
      <view class="t-ju-between list">
        <view class="left_list">所在城市</view>
        <view class="right_list">请选择</view>
      </view>
      <view class="title">
        备注
      </view>
      <view class="mar_auto_20">
        <u-input v-model="textareaValue" type="textarea" :border="true" :height="200" :auto-height="true" />
      </view>
      <view class="title">
        摆放场景图
      </view>
      <view>
        <u-upload :action="action" :file-list="fileList" ></u-upload>
      </view>
    </view>
    <u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
    <!--  -->
    <view class="bottom t-ju-around">
      <view class="save">
        <view class="image">
          <image class="img" src="../../static/prebook/baocun.png" mode=""></image>
        </view>
        <view class="text">
          保存修改
        </view>
      </view>
      <view class="edit">
        <view class="image">
          <image class="img" src="../../static/prebook/xiugai.png" mode=""></image>
        </view>
        <view class="text">
          设计
        </view>
      </view>
      <view class="edit">
        <view class="image">
          <image class="img" src="../../static/prebook/gaiyuyuedingdan.png" mode=""></image>
        </view>
        <view class="text">
          改预约单
        </view>
      </view>
      <view class="edit">
        <view class="image">
          <image class="img" src="../../static/prebook/paiduiqingkuang.png" mode=""></image>
        </view>
        <view class="text">
          排队情况
        </view>
      </view>
      <view class="edit">
        <view class="image">
          <image class="img" src="../../static/prebook/qiehuanduilie.png" mode=""></image>
        </view>
        <view class="text">
          切换队列
        </view>
      </view>
    </view>
  </view>
  
</template>

<script setup>
import { ref } from 'vue'
const textareaValue = ref('')
const show = ref(false)
const list = ref([{
    value: '1',
    label: '江'
  },
  {
    value: '2',
    label: '湖'
}])
const confirm = (e) => {
  console.log('e==', e)
  show.value = false
}
const handleSelect = () => {
  console.log('选择')
  show.value = true
}
const action = ref('http://www.example.com/upload')
const fileList = ref([{
  url: 'https://img2.baidu.com/it/u=3202947311,1179654885&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1678035600&t=3bc1ca76995dd635b10b7e1d5d648cfa',
}])
// 跳转页面
const openPage = (id) => {
  console.log('id=',id)
  uni.navigateTo({
    url: '/pages/index/output/outputinfo'+'?id='+id
  })
}
</script>

<style lang="scss" scoped>
  page {
    background-color: #fff;
  }
  .content {
    padding: 30rpx;
    border-top: 2rpx solid #EEEEEE;
    padding-bottom: 150rpx;
    .title {
      font-size: 32rpx;
      line-height: 70rpx;
      font-weight: bold;
      border-bottom: 2rpx solid #EEEEEE;
    }
    .textarea_box {
      padding: 20rpx;
      width: 92%;
      border: 1rpx solid #797979;
      box-sizing: border-box;

      .textarea {
        border: none;
      }
    }

    .list {
      padding: 0rpx 8rpx;
      height: 80rpx;

      .left_list {
        font-size: 24rpx;
        color: #9E9E9E;
      }

      .right_list {
        font-size: 26rpx;
        font-weight: 500;

        .color2 {
          color: #9E9E9E;
        }

        .color1 {
          color: black;
        }
      }
    }
  }
  .bottom{
    position: fixed;
    bottom: 0;
    z-index: 999;
    width: 100%;
    height: 120rpx;
    background-color: #fff;
    border-top: 2rpx solid #EEEEEE;
    .save{
      width: 100rpx;
      height: 100rpx;
      .image{
        width: 50rpx;
        height:  50rpx;
        margin: 0 auto;
        .img{
          width: 100%;
          height: 100%;
        }
      }
      .text{
        width: 100%;
        height: 50rpx;
        line-height: 50rpx;
        font-size: 24rpx;
        color: #9E9E9E;
        text-align: center;
      }
    }
    .edit{
      width: 100rpx;
      height: 100rpx;
      .image{
        width: 50rpx;
        height:  50rpx;
        margin: 0 auto;
        .img{
          width: 100%;
          height: 100%;
        }
      }
      .text{
        width: 100%;
        height: 50rpx;
        line-height: 50rpx;
        font-size: 24rpx;
        color: #9E9E9E;
        text-align: center;
      }
    }
  }
</style>